<!doctype html>
<html lang="en">
<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
<!--    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">-->

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<!--    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>-->
    <title>Hello, world!</title>
</head>
<body>

<!--<h1>Hello, world!</h1>-->

<!--<div class="btn-group-vertical">-->
<!--    <input class="btn btn-primary" type="submit" value="提交">-->
<!--    <input class="btn btn-primary" type="submit" value="提交">-->
<!--    <input class="btn btn-primary" type="submit" value="提交">-->
<!--    <input class="btn btn-primary" type="submit" value="提交">-->
<!--    <button type="button" class="btn btn-link">新建</button>-->
<!--    <button type="button" class="btn btn-link">新建</button>-->
<!--    <button type="button" class="btn btn-link">新建</button>-->

<!--    <div class="btn-group" role="group">-->
<!--        <button id="btnGroupDrop1" type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">-->
<!--            Dropdown-->
<!--        </button>-->
<!--        <div class="dropdown-menu" aria-labelledby="btnGroupDrop1">-->
<!--            <a class="dropdown-item" href="#">Dropdown link</a>-->
<!--            <a class="dropdown-item" href="#">Dropdown link</a>-->
<!--        </div>-->
<!--    </div>-->
<!--</div>-->

<div>

</div>

<!--<form>-->
<!--    <div class="form-group row">-->
<!--        <label for="inputEmail3" class="col-sm-2 col-form-label">Email</label>-->
<!--        <div class="col-sm-10">-->
<!--            <input type="email" class="form-control" id="inputEmail3" placeholder="Email" style="width: 300px">-->
<!--        </div>-->
<!--    </div>-->
<!--    <div class="form-group row">-->
<!--        <label for="inputPassword3" class="col-sm-2 col-form-label" style="width: 300px">Password</label>-->
<!--        <div class="col-sm-10">-->
<!--            <input type="password" class="form-control" id="inputPassword3" placeholder="Password">-->
<!--        </div>-->
<!--    </div>-->
<!--    <fieldset class="form-group">-->
<!--        <div class="row">-->
<!--            <legend class="col-form-label col-sm-2 pt-0">Radios</legend>-->
<!--            <div class="col-sm-10">-->
<!--                <div class="form-check">-->
<!--                    <input class="form-check-input" type="radio" name="gridRadios" id="gridRadios1" value="option1" checked>-->
<!--                    <label class="form-check-label" for="gridRadios1">-->
<!--                        First radio-->
<!--                    </label>-->
<!--                </div>-->
<!--                <div class="form-check">-->
<!--                    <input class="form-check-input" type="radio" name="gridRadios" id="gridRadios2" value="option2">-->
<!--                    <label class="form-check-label" for="gridRadios2">-->
<!--                        Second radio-->
<!--                    </label>-->
<!--                </div>-->

<!--            </div>-->
<!--        </div>-->
<!--    </fieldset>-->
<!--    <div class="form-group row">-->
<!--        <div class="col-sm-2">Checkbox</div>-->
<!--        <div class="col-sm-10">-->
<!--            <div class="form-check">-->
<!--                <input class="form-check-input" type="checkbox" id="gridCheck1">-->
<!--                <label class="form-check-label" for="gridCheck1">-->
<!--                    Example checkbox-->
<!--                </label>-->
<!--            </div>-->
<!--        </div>-->
<!--    </div>-->
<!--    <div class="form-group row">-->
<!--        <div class="col-sm-10">-->
<!--            <button type="submit" class="btn btn-primary">Sign in</button>-->
<!--        </div>-->
<!--    </div>-->
<!--</form>-->


<!--<div class="list-group">-->
<!--    <a href="#" class="list-group-item list-group-item-action active"> Cras justo odio </a>-->
<!--    <a href="#" class="list-group-item list-group-item-action active">Dapibus ac facilisis in</a>-->
<!--    <a href="#" class="list-group-item list-group-item-action">Morbi leo risus</a>-->
<!--    <a href="#" class="list-group-item list-group-item-action">Porta ac consectetur ac</a>-->
<!--    <a href="#" class="list-group-item list-group-item-action disabled" tabindex="-1" aria-disabled="true">Vestibulum at eros</a>-->
<!--</div>-->


<!--<ul class="nav flex-column">-->
<!--    <li class="nav-item">-->
<!--        <a class="nav-link active" href="#">Active</a>-->
<!--    </li>-->
<!--    <li class="nav-item">-->
<!--        <a class="nav-link" href="#">Link</a>-->
<!--    </li>-->
<!--    <li class="nav-item">-->
<!--        <a class="nav-link" href="#">Link</a>-->
<!--    </li>-->
<!--    <li class="nav-item">-->
<!--        <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>-->
<!--    </li>-->
<!--</ul>-->

<nav id="navbar-example3" class="navbar navbar-light bg-light">
    <a class="navbar-brand" href="#">Navbar</a>
    <nav class="nav nav-pills flex-column">
        <a class="nav-link" href="#item-1">Item 1</a>
        <nav class="nav nav-pills flex-column">
            <a class="nav-link ml-3 my-1" href="#item-1-1">Item 1-1</a>
            <a class="nav-link ml-3 my-1" href="#item-1-2">Item 1-2</a>
        </nav>
        <a class="nav-link" href="#item-2">Item 2</a>
        <a class="nav-link" href="#item-3">Item 3</a>
        <nav class="nav nav-pills flex-column">
            <a class="nav-link ml-3 my-1" href="#item-3-1">Item 3-1</a>
            <a class="nav-link ml-3 my-1" href="#item-3-2">Item 3-2</a>
        </nav>
    </nav>
</nav>

<div data-spy="scroll" data-target="#navbar-example3" data-offset="0">
    <h4 id="item-1">Item 1</h4>
    <p>...</p>
    <h5 id="item-1-1">Item 1-1</h5>
    <p>...</p>
    <h5 id="item-1-2">Item 1-2</h5>
    <p>...</p>
    <h4 id="item-2">Item 2</h4>
    <p>...</p>
    <h4 id="item-3">Item 3</h4>
    <p>...</p>
    <h5 id="item-3-1">Item 3-1</h5>
    <p>...</p>
    <h5 id="item-3-2">Item 3-2</h5>
    <p>...</p>
</div>

<div class="spinner-border" role="status">
    <span class="sr-only">Loading...</span>
</div>


<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
    <div class="toast-header">
        <img src="..." class="rounded mr-2" alt="...">
        <strong class="mr-auto">Bootstrap</strong>
        <small class="text-muted">just now</small>
        <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
            <span aria-hidden="true">&times;</span>
        </button>
    </div>
    <div class="toast-body">
        See? Just like this.
    </div>
</div>

<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
    <div class="toast-header">
        <img src="..." class="rounded mr-2" alt="...">
        <strong class="mr-auto">Bootstrap</strong>
        <small class="text-muted">2 seconds ago</small>
        <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
            <span aria-hidden="true">&times;</span>
        </button>
    </div>
    <div class="toast-body">
        Heads up, toasts will stack automatically
    </div>
</div>

<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
    <div class="toast-header">
        <img src="..." class="rounded mr-2" alt="...">
        <strong class="mr-auto">Bootstrap</strong>
        <small>11 mins ago</small>
        <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
            <span aria-hidden="true">&times;</span>
        </button>
    </div>
    <div class="toast-body">
        Hello, world! This is a toast message.
    </div>
</div>

<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>


</body>


</html>